<template>
	<view class="home-container">
		<!-- 轮播图 -->
		<view class="carousel-section">
			<swiper class="carousel" 
					:indicator-dots="true" 
					:autoplay="true" 
					:interval="3000" 
					:duration="500"
					indicator-color="rgba(255, 255, 255, 0.5)"
					indicator-active-color="#ffffff">
				<swiper-item v-for="(item, index) in carouselList" :key="index">
					<image class="carousel-image" :src="item.image" mode="aspectFill" @click="onCarouselClick(item)"></image>
					<view class="carousel-overlay">
						<text class="carousel-title">{{ item.title }}</text>
						<text class="carousel-desc">{{ item.description }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 导航栏 -->
		<view class="nav-section">
			<view class="nav-item" @click="goToActivities">
				<view class="nav-icon">🏥</view>
				<text class="nav-text">义诊活动</text>
			</view>
			<view class="nav-item" @click="goToAppointments">
				<view class="nav-icon">📅</view>
				<text class="nav-text">我的预约</text>
			</view>
			<view class="nav-item" @click="goToPatients">
				<view class="nav-icon">👥</view>
				<text class="nav-text">就诊人管理</text>
			</view>
			<view class="nav-item" @click="goToHealth">
				<view class="nav-icon">💊</view>
				<text class="nav-text">健康档案</text>
			</view>
		</view>
		
		<!-- 活动列表 -->
		<view class="activity-section">
			<view class="section-header">
				<text class="section-title">最新活动</text>
				<text class="more-link" @click="goToActivities">更多</text>
			</view>
			<view class="activity-list">
				<view class="activity-item" v-for="(item, index) in activityList" :key="index">
					<view class="activity-content" @click="viewActivity(item)">
						<image class="activity-image" 
							   :src="item.cover || '/static/images/default-activity.jpg'" 
							   mode="aspectFill"
							   @error="onImageError(index)"></image>
						<view class="activity-info">
							<text class="activity-title">{{ item.name }}</text>
							<text class="activity-desc">{{ item.description }}</text>
							<view class="activity-meta">
								<text class="activity-time">{{ formatDate(item.startTime) }}</text>
								<text class="activity-status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
							</view>
						</view>
					</view>
					<view class="activity-actions" v-if="item.status !== 'ENDED'">
						<button 
							class="register-btn" 
							type="primary" 
							size="mini"
							@click="registerActivity(item)"
						>
							立即报名
						</button>
					</view>
				</view>
			</view>
			
			<!-- 加载状态 -->
			<view v-if="loading" class="loading-container">
				<text class="loading-text">加载中...</text>
			</view>
			
			<!-- 空状态 -->
			<view v-if="!loading && activityList.length === 0" class="empty-container">
				<text class="empty-text">暂无活动</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			carouselList: [
				{
					image: '/static/images/lunA.png',
					title: '春季健康义诊',
					description: '为村民提供免费健康检查',
					link: '/pages/activity/list'
				},
				{
					image: '/static/images/lunB.png',
					title: '老年人健康检查',
					description: '关注农村老年人健康',
					link: '/pages/activity/list'
				},
				{
					image: '/static/images/lunC.png',
					title: '儿童健康关怀',
					description: '呵护儿童健康成长',
					link: '/pages/activity/list'
				},
				{
					image: '/static/images/lunD.png',
					title: '关注留守儿童空巢老人',
					description: '让农村守望者不在孤单',
					link: '/pages/activity/list'
				}
			],
			activityList: [],
			loading: false
		}
	},
	
	onLoad() {
		this.loadActivities();
	},
	
	onPullDownRefresh() {
		this.loadActivities();
	},
	
	methods: {
		// 加载活动列表
		async loadActivities() {
			this.loading = true;
			try {
				const response = await uni.request({
					url: this.$baseUrl + '/activity/list',
					method: 'GET',
					header: {
						'Content-Type': 'application/json'
					}
				});
				
				if (response.statusCode === 200 && response.data.code === 200) {
					this.activityList = response.data.data || [];
				} else {
					uni.showToast({
						title: response.data.message || '获取活动列表失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取活动列表失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
				uni.stopPullDownRefresh();
			}
		},
		
		// 轮播图点击
		onCarouselClick(item) {
			if (item.link) {
				uni.navigateTo({
					url: item.link
				});
			}
		},
		
		// 格式化日期
		formatDate(dateString) {
			if (!dateString) return '';
			const date = new Date(dateString);
			return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
		},
		
		// 获取状态样式类
		getStatusClass(status) {
			switch (status) {
				case 'UPCOMING':
					return 'upcoming';
				case 'ONGOING':
					return 'ongoing';
				case 'ENDED':
					return 'ended';
				default:
					return 'upcoming';
			}
		},
		
		// 获取状态文本
		getStatusText(status) {
			switch (status) {
				case 'UPCOMING':
					return '即将开始';
				case 'ONGOING':
					return '进行中';
				case 'ENDED':
					return '已结束';
				default:
					return '即将开始';
			}
		},
		
		// 导航方法
		goToActivities() {
			uni.navigateTo({
				url: '/pages/activity/list'
			});
		},
		
		// 图片加载失败处理
		async onImageError(index) {
			const activity = this.activityList[index];
			if (activity && activity.cover) {
				try {
					// 尝试刷新封面URL
					const response = await uni.request({
						url: this.$baseUrl + `/activity/${activity.id}/refreshCover`,
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						}
					});
					
					if (response.statusCode === 200 && response.data.code === 200) {
						// 更新活动封面URL
						this.$set(this.activityList[index], 'cover', response.data.data.coverUrl);
					} else {
						// 如果刷新失败，使用默认图片
						this.$set(this.activityList[index], 'cover', '/static/images/default-activity.jpg');
					}
				} catch (error) {
					console.error('刷新活动封面失败:', error);
					// 使用默认图片
					this.$set(this.activityList[index], 'cover', '/static/images/default-activity.jpg');
				}
			} else {
				// 如果没有封面，使用默认图片
				this.$set(this.activityList[index], 'cover', '/static/images/default-activity.jpg');
			}
		},
		
		goToAppointments() {
			uni.navigateTo({
				url: '/pages/profile/my-appointments'
			});
		},
		
		goToPatients() {
			uni.navigateTo({
				url: '/pages/patient/patient'
			});
		},
		
		goToHealth() {
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			});
		},
		
		viewActivity(activity) {
			uni.navigateTo({
				url: `/pages/activity/activity-detail?id=${activity.id}`
			});
		},
		
		// 报名活动
		registerActivity(item) {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				return;
			}
			
			uni.navigateTo({
				url: `/pages/activity/register?activityId=${item.id}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.home-container {
	min-height: 100vh;
	background: #f5f5f5;
}

// 轮播图样式
.carousel-section {
	width: 100%;
	height: 400rpx;
	position: relative;
	
	.carousel {
		width: 100%;
		height: 100%;
		
		.carousel-image {
			width: 100%;
			height: 100%;
		}
		
		.carousel-overlay {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
			padding: 40rpx 30rpx 30rpx;
			
			.carousel-title {
				display: block;
				font-size: 32rpx;
				color: #ffffff;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			
			.carousel-desc {
				display: block;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}
}

// 导航栏样式
.nav-section {
	display: flex;
	justify-content: space-around;
	background: #ffffff;
	padding: 40rpx 20rpx;
	margin: 20rpx;
	border-radius: 15rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	
	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		
		.nav-icon {
			font-size: 48rpx;
			margin-bottom: 15rpx;
		}
		
		.nav-text {
			font-size: 24rpx;
			color: #333333;
		}
	}
}

// 活动列表样式
.activity-section {
	background: #ffffff;
	margin: 20rpx;
	border-radius: 15rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.section-title {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}
		
		.more-link {
			font-size: 24rpx;
			color: #4CAF50;
			
			&:active {
				opacity: 0.7;
			}
		}
	}
	
	.activity-list {
		.activity-item {
			display: flex;
			margin-bottom: 30rpx;
			padding: 20rpx;
			background: #f8f9fa;
			border-radius: 10rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.activity-content {
				flex: 1;
				display: flex;
			}
			
			.activity-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}
			
			.activity-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.activity-title {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
				
				.activity-desc {
					font-size: 24rpx;
					color: #666666;
					margin-bottom: 15rpx;
					line-height: 1.4;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				
				.activity-meta {
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.activity-time {
						font-size: 22rpx;
						color: #999999;
					}
					
					.activity-status {
						font-size: 22rpx;
						padding: 4rpx 12rpx;
						border-radius: 20rpx;
						
						&.upcoming {
							background: #e3f2fd;
							color: #1976d2;
						}
						
						&.ongoing {
							background: #e8f5e8;
							color: #388e3c;
						}
						
						&.ended {
							background: #ffebee;
							color: #d32f2f;
						}
					}
				}
			}
			
			.activity-actions {
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				
				.register-btn {
					background-color: #1890ff;
					color: #ffffff;
					border: none;
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.loading-container {
		text-align: center;
		padding: 40rpx;
		
		.loading-text {
			font-size: 28rpx;
			color: #999999;
		}
	}
	
	.empty-container {
		text-align: center;
		padding: 60rpx 40rpx;
		
		.empty-text {
			font-size: 28rpx;
			color: #999999;
		}
	}
}
</style> 